

<template>
    <div>
      <a-form layout="inline" :model="queryModel" v-if="searchBox">
        <a-form-item label="搜索词">
          <a-input v-model:value="queryModel.keyWord" placeholder="请输入搜索关键字" allow-clear />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model:value="queryModel.status" placeholder="请选择房屋状态">
            <!-- 空置0、已售1、自住2、租易3-->
            <a-select-option :value="0">空置</a-select-option>
            <a-select-option :value="1">已售</a-select-option>
            <a-select-option :value="2">自住</a-select-option>
            <a-select-option :value="3">租易</a-select-option>
          </a-select>
        </a-form-item>
        <a-space>
          <a-button type="primary" @click="list">查询</a-button>
          <a-button @click="resetQuery">重置</a-button>
        </a-space>
      </a-form>
      <div class="functionBox">
        <a-space class="left">
          <a-button type="dashed" :icon="h(PlusOutlined)" @click="operator(0)">新增</a-button>
        </a-space>
        <a-space class="right">
          <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="list" />
          <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
        </a-space>
      </div>
      <div ref="basePoint" :style="`height: ${ windowHeight - elementToTopHight - 7 }px !important;`">
        <a-table
            :columns="columns"
            :rowKey="( record : Role ) => record.id"
            @resizeColumn="handleResizeColumn"
            :pagination="false"
            :locale="{ emptyText: '暂无数据' }"
            :data-source="data"
            :scroll="{ y: ( windowHeight - elementToTopHight - 216 ) + 'px' }"
        >
          <template #bodyCell="{ column , record  }">
            <template v-if="column.dataIndex === 'status'">
              <a-tag color="#f50" v-if="record.status == 0">空置</a-tag>
              <a-tag color="#2db7f5" v-if="record.status == 1">已售</a-tag>
              <a-tag color="#87d068" v-if="record.status == 2">自住</a-tag>
              <a-tag color="#108ee9" v-if="record.status == 3">租易</a-tag>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-button type="link" size="small" @click="residentOperator(0, record.id)">添加住户</a-button>
              <a-button type="link" size="small" @click="operator(1, record)">编辑</a-button>
              <a-popconfirm title="是否要真的删除这个房屋信息嘛!" @confirm="remove([ record.id ])">
                <a-button type="link" size="small" class="removeBt">删除</a-button>
              </a-popconfirm>
            </template>
          </template>
          <template #expandedRowRender="{ record : tRecord, index, indent, expanded }">
            <a-table
                :columns="userColumns"
                :data-source="tRecord.users"
                @resizeColumn="handleResizeColumn"
                :locale="{ emptyText: '暂无住户和租户数据' }"
                :pagination="false">
              <template #bodyCell="{ text, record, index : cIdx, column  }">
                <template v-if="column.dataIndex === 'sex'">
                  <a-tag color="#f0a1a8" v-if="record.sex == 1">女</a-tag>
                  <a-tag color="#108ee9" v-if="record.sex == 0">男</a-tag>
                </template>
                <template v-if="column.dataIndex === 'type'">
                  <a-tag color="green" v-if="record.type == 0">系统管理员</a-tag>
                  <a-tag color="cyan" v-if="record.type == 1">物业管理员</a-tag>
                  <a-tag color="blue" v-if="record.type == 2">业主</a-tag>
                  <a-tag color="orange" v-if="record.type == 3">住户</a-tag>
                  <a-tag color="purple" v-if="record.type == 4">租户</a-tag>
                </template>
                <template v-if="column.dataIndex === 'status'">
                  <a-tag color="success" v-if="tRecord.houseUser && tRecord.houseUser[cIdx].status == 1">
                      <template #icon>
                        <check-circle-outlined />
                      </template>
                      通过
                  </a-tag>
                  <div style="display: flex;flex-direction: column;align-items: center;" v-if="tRecord.houseUser && tRecord.houseUser[cIdx].status == 2">
                    <a-tag color="error">
                      <template #icon>
                        <CloseCircleFilled />
                      </template>
                      驳回
                    </a-tag>
                    <span class="dec">({{ tRecord.houseUser[cIdx].remark }})</span>
                  </div>
                  <a-tag color="default" v-if="tRecord.houseUser && tRecord.houseUser[cIdx].status == 0">
                    <template #icon>
                      <clock-circle-outlined />
                    </template>
                    待审
                  </a-tag>
                </template>
                <template v-if="column.dataIndex === 'action'">
                  <a-button type="link" size="small" @click="residentOperator(1, null , record )"
                  >编辑</a-button>
                  <a-button type="link" size="small" :disabled="tRecord.houseUser && tRecord.houseUser[cIdx].status != 0"
                            @click="audit({ houseId: tRecord.id, userId: record.id } as HouseUser)"
                            >审核</a-button>
                  <a-popconfirm title="是否要真的解除这个用户绑定的房屋!" @confirm="unbind({ houseId: tRecord.id, userId: record.id } as HouseUser)">
                    <template #icon><question-circle-outlined style="color: red" /></template>
                    <a-button type="link" size="small" class="removeBt">解绑</a-button>
                  </a-popconfirm>
                </template>
              </template>
            </a-table>
          </template>
        </a-table>
        <div class="pagination">
          <a-pagination
              size="small"
              :disabled="total == 0"
              :total="total"
              show-size-changer
              @change="pageChange"
              show-quick-jumper />
        </div>
      </div>

      <a-modal
          v-model:open="auditStore.open"
          title="审核住户"
          @ok="auditOk"
          @cancel="auditCancel"
      >
        <a-form
            style="margin: 12px 0"
            :model="auditStore.houseUser"
            labelAlign="right"
            ref="auditFormRef"
            :rules="auditRules"
            :label-col="{ style: { width: '80px' } }"
        >
          <a-form-item label="状态" name="status">
            <a-radio-group v-model:value="auditStore.houseUser.status">
              <a-radio :value="1">通过</a-radio>
              <a-radio :value="2">驳回</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="备注" name="remark">
            <a-textarea v-model:value="auditStore.houseUser.remark" placeholder="请输入审核备注" :auto-size="{ minRows: 2, maxRows: 5 }" />
          </a-form-item>
        </a-form>
      </a-modal>

      <a-modal
        :title="operatorStore.cmd == 0 ? '新增房屋' : '编辑房屋'"
        v-model:open="operatorStore.open"
        @cancel="cancel"
        @ok="submit"
        width="800px"
      >
        <a-form
            style="margin: 12px 0"
            :model="operatorStore.house"
            labelAlign="right"
            ref="formRef"
            :rules="rules"
            :label-col="{ style: { width: '80px' } }"
        >
          <a-row :gutter="[16,16]">
            <a-col :span="8">
              <a-form-item label="楼栋号" name="floorName">
                <a-input v-model:value="operatorStore.house.floorName" placeholder="请输入楼栋号" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="单元号" name="unitNumber">
                <a-input type="number" v-model:value="operatorStore.house.unitNumber" placeholder="请输入单元号" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="楼层号" name="floor">
                <a-input type="number" v-model:value="operatorStore.house.floor" placeholder="请输入楼层号" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[16,16]">
            <a-col :span="8">
              <a-form-item label="房间号" name="building">
                <a-input  v-model:value="operatorStore.house.building" placeholder="请输入房间号" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="房型" name="roomType">
                <a-input v-model:value="operatorStore.house.roomType" placeholder="如(一室一厅)" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="建筑面积" name="area">
                <a-input type="number" v-model:value="operatorStore.house.area" placeholder="请输入建筑面积" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[16,16]">
            <a-col :span="8">
              <a-form-item label="状态" name="status">
                <a-select v-model:value="operatorStore.house.status" placeholder="请选择房屋状态">
                  <a-select-option :value="0">空置</a-select-option>
                  <a-select-option :value="1">已售</a-select-option>
                  <a-select-option :value="2">自住</a-select-option>
                  <a-select-option :value="3">租易</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="购买日期" name="purchaseDate">
                <a-date-picker v-model:value="operatorStore.house.purchaseDate" placeholder="请选择购买日期" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="装修日期" name="lastRenovation">
                <a-date-picker v-model:value="operatorStore.house.lastRenovation" placeholder="请选择最近的装修日期" style="width: 100%" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[16,16]">
            <a-col :span="8">
              <a-form-item label="电表号" name="electricityMeterNumber">
                <a-input v-model:value="operatorStore.house.electricityMeterNumber" placeholder="请输入电表号" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="水表号" name="waterMeterNumber">
                <a-input v-model:value="operatorStore.house.waterMeterNumber" placeholder="请输入水表号" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="气表号" name="gasMeterNumber">
                <a-input v-model:value="operatorStore.house.gasMeterNumber" placeholder="请输入气表号" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[16,16]">
            <a-col :span="12">
              <a-form-item label="入住时间" name="moveInDate">
                <a-date-picker v-model:value="operatorStore.house.moveInDate" placeholder="请选择最近的装修日期" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="备注" name="remarks">
                <a-input v-model:value="operatorStore.house.remarks" placeholder="请输入备注" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>

      <a-modal
        :title="residentStore.cmd == 0 ? '新增住户' : '编辑住户'"
        v-model:open="residentStore.open"
        width="680px"
        @cancel="residentCancel"
        @ok="residentOk"
      >
        <a-form
            style="margin: 12px 0"
            :model="residentStore.user"
            labelAlign="right"
            ref="residentFrom"
            :rules="residentRules"
            :label-col="{ style: { width: '80px' } }"
        >
          <a-row :gutter="[16,16]">
            <a-col :span="12">
              <a-form-item label="姓名" name="realName">
                <a-input v-model:value="residentStore.user.realName" placeholder="请输入真实姓名" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="身份证" name="idCard">
                <a-input v-model:value="residentStore.user.idCard" placeholder="请输入身份证号码" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[16,16]">
            <a-col :span="12">
              <a-form-item label="联系电话" name="phoneNumber">
                <a-input v-model:value="residentStore.user.phoneNumber" placeholder="请输入联系电话" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="性别" name="sex">
                <a-radio-group v-model:value="residentStore.user.sex">
                  <a-radio :value="0">男</a-radio>
                  <a-radio :value="1">女</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[16,16]">
            <a-col :span="12">
              <a-form-item label="住户类型" name="nation">
                <a-select
                    v-model:value="residentStore.user.type"
                    style="width: 100%"
                    placeholder="请选择住户类型"
                    :options="residentTypes"
                ></a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>

    </div>
</template>

<script setup lang="ts">
    import useHouse from "@/hooks/useHouse";
    import {h} from "vue";
    import {
      ClockCircleOutlined,
      CheckCircleOutlined,
      PlusOutlined,
      QuestionCircleOutlined,
      CloseCircleFilled,
      ReloadOutlined,
      SearchOutlined
    } from "@ant-design/icons-vue";
    import DynamicHeight from "@/utils/DynamicHeight";
    import type {Role} from "@/interface/Role";
    import type {HouseUser} from "@/interface/HouseUser";
    const { basePoint , windowHeight , elementToTopHight } = DynamicHeight();
    const {
      searchBox , resetQuery , list , queryModel , data ,
      handleResizeColumn , columns , total , pageChange ,
      operatorStore , operator , formRef , rules , submit ,
      cancel , userColumns , remove , audit , auditStore,
      auditOk , auditRules , auditFormRef , auditCancel ,
      residentStore , residentRules , residentOperator ,
      residentTypes , residentCancel , residentOk ,
      residentFrom , unbind
    }  = useHouse();



</script>

<style scoped lang="scss">
    .functionBox {
      margin: 18px 0 12px 0;
      display: flex;
      justify-content: space-between;
    }
    .pagination {
      margin: 8px 0;
      display: flex;
      justify-content: end;
    }
    .dec {
      opacity: 0.5;
      font-size: 12px;
      font-weight: bolder;
      margin-top: 6px;
    }
</style>
